<script setup lang="ts">
import { ref, computed } from 'vue';
import {
  NIcon,
  NButton,
  NSelect,
  NForm,
  NFormItem,
  useDialog,
  NInputNumber,
  NSwitch
} from 'naive-ui'
import AddPageView from './add-page.vue'

const props = defineProps<{
  game: string
}>()
const ipcRenderer = eval('require("electron").ipcRenderer')
const showNew = ref(false)
const currentPage = computed(() => {
  return (pages.value.find(v => v.name === current.value) || {}) as {
    id: string,
    name: string,
    url: string,
    width: number,
    height: number,
    placement: string
  }
})
const current = ref('')
const pages = ref([] as any[])
const rules = {
  name: [{
    required: true,
    validator(rule: any, value: string) {
      if (!value) {
        return new Error('必须输入页面名')
      } else if (value.length < 2) {
        return new Error('页面名太短')
      } else if (value.length > 32) {
        return new Error('页面名太长')
      }
      return true
    },
    trigger: ['input', 'blur']
  }],
  width: [{
    required: true,
    validator(rule: any, value: number) {
      if (!value) {
        return new Error('必须输入宽度')
      } else if (!/^\d*$/.test(value + '')) {
        return new Error('宽度应该为整数')
      } else if (value < 240 || value > 5120) {
        return new Error('宽度设置范围 [240, 5120]')
      }
      return true
    },
    trigger: ['input', 'blur']
  }],
  height: [{
    required: true,
    validator(rule: any, value: number) {
      if (!value) {
        return new Error('必须输入高度')
      } else if (!/^\d*$/.test(value + '')) {
        return new Error('高度应该为整数')
      } else if (value < 64 || value > 1440) {
        return new Error('高度设置范围 [64, 1440]')
      }
      return true
    },
    trigger: ['input', 'blur']
  }],
  placement: [{
    required: true,
    message: '必须输入位置',
    trigger: ['input', 'blur']
  }]
}

const running = ref(false)
const PlacementOptions = [
  {label: 'bottom-center', value: '底部居中'},
  {label: 'top-center', value: '顶部居中'},
  {label: 'left-center', value: '左边居中'},
  {label: 'right-center', value: '右边居中'}
]

; (async () => {
  const res = await ipcRenderer.invoke('fetch-all-pages')
  pages.value = res
  current.value = pages.value[0]?.name
})()

async function onAdd(name: string) {
  const res = await ipcRenderer.invoke('add-page', name)
  if (res) {
    pages.value = res
    showNew.value = false
    current.value = name
  }
}

async function onStart() {
  if (!currentPage || !props.game) {
    return
  }
  const res = await ipcRenderer?.invoke('start', JSON.stringify({
    game: props.game,
    page: currentPage.value
  }))
  if (res) {
    running.value = true
  }
}

function onStop() {
  ipcRenderer?.send('stop')
  running.value = false
}

ipcRenderer?.on('state-stop', () => {
  running.value = false
})

</script>

<template>
  <div class="dash-board-config">
    <label class="group-title">页面列表</label>
    <div class="pages-select">
      <n-select :options="pages" label-field="name" value-field="name" v-model:value="current"
        :disabled="running || pages.length < 1">
      </n-select>
    </div>
    <label class="group-title">页面配置</label>
    <n-form ref="formRef" class="page-options" label-placement="top" :model="currentPage" :rules="rules">
      <n-form-item path="width" label="宽度">
        <n-input-number :disabled="running" v-model:value="currentPage.width" :show-button="false" />
      </n-form-item>
      <n-form-item path="height" label="高度">
        <n-input-number :disabled="running" v-model:value="currentPage.height" :show-button="false" />
      </n-form-item>
      <n-form-item path="placement" label="位置">
        <n-select :disabled="running" v-model:value="currentPage.placement" :options="PlacementOptions"></n-select>
      </n-form-item>
      <n-form-item path="movable" label="移动">
        <n-switch :disabled="running">
        </n-switch>
      </n-form-item>
    </n-form>
    <label class="group-title">页面预览</label>
    <div class="page-review"></div>
    <div class="actions">
      <n-button type="error" :disabled="!running" @click="onStop">关闭</n-button>
      <n-button type="primary" :disabled="running" @click="onStart">启动</n-button>
    </div>
    <AddPageView v-model:value="showNew" @ok="onAdd" />
  </div>
</template>
  
<style lang="less" scoped>
.dash-board-config {
  display: flex;
  flex-direction: column;
  background: rgba(16, 16, 20, 0.98);
  flex-grow: 1;
  padding: 5px 12px;

  .group-title {
    margin-top: 15px;
    margin-bottom: 5px;
    opacity: 0.85;
  }
  .pages-select {
    display: flex;
    button {
      margin-left: 8px;
    }
  }
  .page-options {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .n-form-item {
      width: 45%;
    }
  }
  .page-review {
    width: 100%;
    height: 180px;
    background-color: black;
  }
  .actions {
    margin-top: 12px;
    display: flex;
    justify-content: flex-end;
    button {
      margin-left: 8px;
    }
  }

}
</style>
  